<template>
    <div class="home-index">
            <div class="home-block">
                <div class="tab-top">
                    <div class="top-item tab">待处理事项</div>
                    <div class="top-item right-area">
                        <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-2 am-form-group"
                                    @change="handleAreaTeamIdChange" v-model="dealFormData.areaTeamId" placeholder="请选择区域">
                            <el-option
                                v-for="item in areaTeams"
                                :key="item.areaTeamId"
                                :label="item.name"
                                :value="item.areaTeamId">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="content-info">
                    <template v-for="item in dealDetail">
                        <div class="content-item">
                            <a :href="('#'+item.url)">
                                <div class="content-item-left content-item-icon1" :class="iconClass[item.message]"></div>
                                <div class="content-item-right">
                                    <h2>{{ item.message }}</h2>
                                    <div class="nums">
                                        <em>{{ item.num }}</em>条
                                    </div>
                                </div>
                            </a>
                        </div>
                    </template>
                </div>
            </div>
            <div class="home-block data-block">
                <div class="tab-top">
                    <div class="top-item tab">数据看板</div>
                    <div class="top-item right-area">
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group search-btn">
                            <div>
                                <button type="button" class="am-btn am-btn-default am-btn-success"
                                        @click="handleAreaTeamIdChangeData" ><span class="am-icon-search"></span>&nbsp;查询
                                </button>
                            </div>
                        </div>
                        <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group home-select-grade" multiple
                                v-model="formData.gradeIds" placeholder="请选择年级">
                            <el-option
                                v-for="item in grades"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select :disabled="periods.length === 0" size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group home-select-period" multiple
                             v-model="formData.periodIds" placeholder="请选择期数">
                            <el-option
                                v-for="item in periods"
                                :key="item.periodId"
                                :label="item.periodName"
                                :value="item.periodId">
                            </el-option>
                        </el-select>
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-2 am-form-group ex-am-form-group">
                            <el-date-picker
                                @change="handleChangeYear"
                                v-model="year"
                                type="year"
                                :clearable="false"
                                :editable="false"
                                placeholder="请选择年份">
                            </el-date-picker>
                        </div>
                        <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-2 am-form-group"
                                v-model="formData.areaTeamId" @change="handleAreaTeamIdChangeDataLook" placeholder="请选择区域">
                            <el-option
                                v-for="item in areaTeams"
                                :key="item.areaTeamId"
                                :label="item.name"
                                :value="item.areaTeamId">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="outer">
                    <div class="content-info">
                        <div class="content-item" v-if="dataDetail.amountUrl !=''">
                            <a :href="('#'+dataDetail.amountUrl)">
                                <h3>预收</h3>
                                <ul>
                                    <li>
                                        <em>{{ dataDetail.amount | formatCommaStyle}}</em>
                                    </li>
                                </ul>
                            </a>
                        </div>
                        <!--<div class="content-item" v-if="dataDetail.fullClassRateUrl !=''">
                            <a :href="('#'+dataDetail.fullClassRateUrl)">
                                <h3 class="expecail">满班率</h3>
                                <ul>
                                    <li>
                                        <div class="circle full">
                                            &lt;!&ndash;左半边圆&ndash;&gt;
                                            <div class="circle-left">
                                                <div class="clip-left">

                                                </div>
                                            </div>
                                            &lt;!&ndash;右半边圆&ndash;&gt;
                                            <div class="circle-right">
                                                <div class="clip-right"></div>
                                            </div>
                                            <div class="mask">
                                                <span>{{ dataDetail.fullClassRate.replace("%","") }}</span>%
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </a>
                        </div>-->
                    </div>
                    <div class="content-info ex-content-info">
                        <div class="content-item" v-if="dataDetail.branchUrl != ''">
                            <a :href="('#'+dataDetail.branchUrl)">
                                <h3 class="subject">科数</h3>
                                <ul>
                                    <li>
                                        <div class="text">新生</div>
                                        <div><em>{{ dataDetail.newBranchNum  }}</em></div>

                                    </li>
                                    <li>
                                        <div class="text">老生</div>
                                        <div><em>{{ dataDetail.oldBranchNum   }}</em></div>

                                    </li>
                                    <li>
                                        <div class="text">续读生</div>
                                        <div><em>{{ dataDetail.seqStepBranchNum  }}</em></div>

                                    </li>
                                </ul>
                            </a>
                        </div>
                        <!--<div class="content-item" v-if="dataDetail.onlineUrl != ''" >
                            <a :href="('#'+dataDetail.onlineUrl)">
                                <h3 class="expecail">网报情况</h3>
                                <ul>
                                    <li class="half-es-li">
                                        <span class="text">科数</span>
                                        <em>{{ dataDetail.onlineBranchNum }}</em>
                                    </li>
                                    <li class="es-li">
                                        <span class="text es-text">占比</span>
                                        <div class="circle percent">
                                            &lt;!&ndash;左半边圆&ndash;&gt;
                                            <div class="circle-left">
                                                <div class="clip-left">

                                                </div>
                                            </div>
                                            &lt;!&ndash;右半边圆&ndash;&gt;
                                            <div class="circle-right">
                                                <div class="clip-right"></div>
                                            </div>
                                            <div class="mask">
                                                <span>{{ dataDetail.onlineRate.replace("%","") }}</span>%
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </a>
                        </div>
                        <div class="content-item" v-if="dataDetailContinued.campusSeqStepUrl != ''">
                            <a :href="('#'+dataDetailContinued.campusSeqStepUrl)">
                                <h3 class="expecail">校区续读</h3>
                                <ul>
                                    <li>
                                        <span class="text es-text">顺期续读率</span>
                                        <div class="circle continued">
                                            &lt;!&ndash;左半边圆&ndash;&gt;
                                            <div class="circle-left">
                                                <div class="clip-left">

                                                </div>
                                            </div>
                                            &lt;!&ndash;右半边圆&ndash;&gt;
                                            <div class="circle-right">
                                                <div class="clip-right"></div>
                                            </div>
                                            <div class="mask">
                                                <span>{{ dataDetailContinued.seqRate.replace("%","") }}</span>%
                                            </div>
                                        </div>
                                    </li>
                                    <li class="es-li">
                                        <span class="text es-text">跨期续读率</span>
                                        <div class="circle step">
                                            &lt;!&ndash;左半边圆&ndash;&gt;
                                            <div class="circle-left">
                                                <div class="clip-left">

                                                </div>
                                            </div>
                                            &lt;!&ndash;右半边圆&ndash;&gt;
                                            <div class="circle-right">
                                                <div class="clip-right"></div>
                                            </div>
                                            <div class="mask">
                                                <span>{{ dataDetailContinued.stepRate.replace("%","") }}</span>%
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </a>
                        </div> -->
                    </div>
                    <!-- <div class="content-info ex-content-info">

                    </div> -->
                </div>
            </div>
    </div>
</template>
<script>
    import io from '../../lib/io'
    import moment from 'moment'
    import storage from '../../lib/storage'

    export default{
        data(){
            return {
                // 待处理事项
                dealDetail: [],

                iconClass:{
                    '待处理退费审核': 'content-item-icon1',
                    '待处理提现审核': 'content-item-icon2',
                    '待处理转让审核': 'content-item-icon3',
                    '可抢占资源': 'content-item-icon4',
                    '待跟进资源': 'content-item-icon5',
                    '超时未抢占资源': 'content-item-icon6'
                },
                // 待处理事项提交数据
                dealFormData:{
                    areaTeamId: '',
                },
                // 数据看板提交的数据
                formData:{
                    gradeIds:[],
                    areaTeamId: '',
                    periodIds: [],
                    // year: moment().format('YYYY'),
                },
                year: moment().format('YYYY'),
                periods: [],
                // 数据看板数据-不包括校区续读
                dataDetail:{
                    allRegNum: '' , //总报名人数
                    amount: '' , // 预收
                    amountUrl: '' , // 预收跳转链接
                    bigLectureRegNum: '' , // 报读大于六讲的报名数
                    branchUrl: '' ,  // 科数跳转链接
                    fullClassRate: '' , // 满班率
                    fullClassRateUrl: '' , // 满班率连接
                    newBranchNum: '' , // 新生科数
                    oldBranchNum: '', // 老生科数
                    onlineBranchNum: '' , // 在线报名人数
                    onlineRate: '' , // 占比
                    onlineUrl: '' , // 网报占比链接
                    seqStepBranchNum: '' , // 续读科数
                    totalQuota: ''   // 总学位
                },
                // 数据看板数据-校区续读
                dataDetailContinued:{
                    campusSeqStepUrl: '' , // 跳转链接
                    seqRate: '' , // 顺期续读率
                    stepRate: '' // 跨期续读率
                },
                color:{
                    '.full': '#00a0e9',
                    '.percent': '#ff9600',
                    '.continued': '#86cc58'
                }
            }
        },
        created(){
            if (window.config.areaTeams) {
                this.formData.areaTeamId = window.config.areaTeams[0].areaTeamId;
                this.dealFormData.areaTeamId = window.config.areaTeams[0].areaTeamId;
            }

            if(window.config.grades){
                let arr = window.config.grades.filter(item => {
                    return (item.gradeName == "高一" || item.gradeName == "高二" || item.gradeName == "高三");
                });
                for(let i = 0 ; i < arr.length ; i ++){
                    this.formData.gradeIds.push(arr[i].gradeId);
                }
            }

            this.cache = storage.getHomeFilterDetail()
            this.cache1 = storage.getHomeFilterData()
            if (this.cache) {
                this.dealFormData.areaTeamId = this.cache.areaTeamId || this.dealFormData.areaTeamId
            }
            if(this.cache1){
                this.formData.gradeIds = this.cache1.gradeIds || this.formData.gradeIds
                this.formData.periodIds = this.cache1.periodIds || this.formData.periodIds
                this.year = this.cache1.year || this.year
                this.formData.areaTeamId = this.cache1.areaTeamId || this.formData.areaTeamId
            }
        },
        computed: {
            areaTeams: function () {
                return this.$root.config.areaTeams || []
            },
            grades () {
                return this.$root.config.grades.map(function(item){
                    return {value: item.gradeId, label: item.gradeName}
                })
            },
        },
        methods:{
            // changeFlout(){
            //     document.querySelector(".el-input__inner").style.cssText = "height:30px;";
            // },
            handleChangeYear(){
                this.loadPeriodByYear(null,true);
            },
            handleAreaTeamIdChange(){
                this.askForDealFunc();
            },
            handleAreaTeamIdChangeData(){
                if(!this.formData.periodIds.length){
                    this.$alert('期数不能为空');
                }else{
                    storage.setHomeFilterData(Object.assign(this.formData, {year: this.year}))
                    this.promiseDrawProcess();
                }
            },
            handleAreaTeamIdChangeDataLook(){
                this.loadPeriodByYear();
            },
            loadPeriodByYear(resolve,change) {
                io.post(io.periodByYearAndAreaTeamId,{
                    areaTeamId: this.formData.areaTeamId,
                    year: this.year ? moment(this.year).format('YYYY'): '',
                },(ret) => {
                    if(ret.success){
                        this.periods = ret.data;
                        if (this.periods.length === 0) {
                            this.$alert('当前没有设置期数');
                            if(change || (!change && !this.cache1)){
                                this.formData.periodIds = [];
                            }

                        }else{
                            if(change || (!change && !this.cache1)){
                                let isCurrent = ret.data.filter(item => item.isCurrent == 1 )[0];
                                if(isCurrent != undefined){
                                    this.formData.periodIds = [ret.data.filter(item => item.isCurrent == 1 )[0].periodId];
                                }else {
                                    this.formData.periodIds = [ret.data[0].periodId] ;
                                }
                            }
                        }
                    }else{
                        this.$alert(ret.desc)
                    }

                    if(resolve){
                        resolve('success');
                    }
                })
            },
            getDraw(parent,percent){
                let circleRight = document.querySelector(parent + " .circle-right");
                let circleLeft = document.querySelector(parent + " .circle-left");
                let color = this.color[parent];
                if(percent <= 50){
                    if(circleRight && circleRight.style){
                        circleRight.style.cssText = "transform:rotate(" + percent * 3.6 + "deg);";
                    }
                }else{
                    if(circleRight && circleRight.style){
                        circleRight.style.cssText = "transform:rotate(0deg);background:" + color;
                    }
                    if(circleLeft && circleLeft.style){
                        circleLeft.style.cssText = "transform:rotate(" + (percent - 50) * 3.6 + "deg);";
                    }
                }
            },
            // 请求待处理事件
            askForDealFunc(){
                storage.setHomeFilterDetail(this.dealFormData)
                io.post(io.findNeedToDeal,{
                    areaTeamId: this.dealFormData.areaTeamId
                },(ret) => {
                    if(ret.success){
                        this.dealDetail = ret.data;
                    }else{
                        this.$alert(ret.desc);
                    }
                })
            },
            // 请求数据看板，不包括校区续读
            askForDataDetail(){
                io.post(io.findDataCount,{
                    areaTeamId: this.formData.areaTeamId,
                    periodIds: this.formData.periodIds.join(","),
                    gradeIds: this.formData.gradeIds.join(","),
                    year: this.year ? moment(this.year).format('YYYY'): ''
                },(ret) => {
                    if(ret.success){
                        this.dataDetail = ret.data;

                        let fprecent = Number(this.dataDetail.fullClassRate.replace("%",""));
                        let pprecent = Number(this.dataDetail.onlineRate.replace("%",""));

                        this.$nextTick(() => {
                            this.getDraw(".full",fprecent);
                            this.getDraw(".percent",pprecent);
                        });

                    }else{
                        this.$alert(ret.desc);
                    }
                })
            },
            // 请求数据看板-校区续读
            askForSchoolDataDetail(){
                io.post(io.findCampusSeqStepRate,{
                    areaTeamId: this.formData.areaTeamId,
                    periodIds: this.formData.periodIds.join(","),
                    gradeIds: this.formData.gradeIds.join(","),
                    year: this.year ? moment(this.year).format('YYYY'): ''
                },(ret) => {
                    if(ret.success){
                        this.dataDetailContinued = ret.data;

                        let cprecent = Number(this.dataDetailContinued.seqRate.replace("%",""));
                        let sprecent = Number(this.dataDetailContinued.stepRate.replace("%",""));

                        this.$nextTick(() => {
                            this.getDraw(".continued",cprecent);
                            this.getDraw(".step",sprecent);
                        });
                    }else{
                        this.$alert(ret.desc);
                    }
                })
            },
            drawProcess(){
                let cprecent = Number(this.dataDetailContinued.seqRate.replace("%",""));
                let fprecent = Number(this.dataDetail.fullClassRate.replace("%",""));
                let sprecent = Number(this.dataDetailContinued.stepRate.replace("%",""));
                let pprecent = Number(this.dataDetail.onlineRate.replace("%",""));

                this.getDraw(".continued",cprecent);
                this.getDraw(".full",fprecent);
                this.getDraw(".step",sprecent);
                this.getDraw(".percent",pprecent);
            },
            // 异步请求，两个请求回来后执行画环形进度条
            promiseDrawProcess(){
                this.askForSchoolDataDetail();
                this.askForDataDetail();

                // let p1 = new Promise((resolve, reject) => {
                //     this.askForSchoolDataDetail();
                //     resolve('success')
                // });
                // let p2 = new Promise((resolve, reject) => {
                //     this.askForDataDetail();
                //     resolve('success')
                // });

                // let process = Promise.all([p1, p2]);
                // process.then(values => {
                //     this.drawProcess();
                // }).catch((error) => {
                // })
            }
        },
        mounted () {
            this.askForDealFunc();

            let p1 = new Promise((resolve, reject) => {
                this.loadPeriodByYear(resolve);
            }).then(values => {
                this.promiseDrawProcess();
            })


        },
        // watch: {
        //     year (newVal, oldVal) {
        //         if (newVal !== oldVal) {
        //             this.loadPeriodByYear();
        //         }
        //     }
        // },
    }
</script>
<style lang="less">
    @marginRight: 30px;
    @images: "../../assets/img/home";
    .home-index{
        background: #f2f7f8;
        padding: 28px 70px 74px 24px;
        height: 100%;
        .home-block{
            .tab-top{
                display: flex;
                margin-bottom: 45px;
                .tab{
                    width: 150px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    background: url("@{images}/tab.png") no-repeat;
                    color: #333;
                    font-weight: bold;
                    font-size: 14px;
                }
                .right-area{
                    flex: 1;
                    border-bottom: 2px solid #00a4d5;
                }
            }
            .content-info{
                display: flex;
                align-content: flex-start;
                flex-wrap: wrap;
                .content-item{
                    width: 310px;
                    height: 130px;
                    background: #fff;
                    border-radius: 3px;
                    padding: 18px 0 0 54px;
                    box-sizing:border-box;
                    -webkit-box-sizing:border-box;
                    margin: 0 0 20px @marginRight ;
                    box-shadow: 1px 0px 6px #d8dfe0;
                    a{
                        display: block;
                        width: 100%;
                        height: 100%;
                        &:after{
                            content: '';
                            display: block;
                            height: 0;
                            visibility: hidden;
                            clear: both;
                        }
                    }
                    .content-item-left{
                        width:56px;
                        height: 56px;
                        margin-right: 15px;
                        float: left;
                    }
                    .content-item-icon1{
                        background: url("@{images}/icons.png") -23px -16px no-repeat;
                    }
                    .content-item-icon2{
                        background: url("@{images}/icons.png") -137px -16px no-repeat;
                    }
                    .content-item-icon3{
                        background: url("@{images}/icons.png") -249px -16px no-repeat;
                    }
                    .content-item-icon5{
                        background: url("@{images}/icons.png") -23px -114px no-repeat;
                    }
                    .content-item-icon6{
                        background: url("@{images}/icons.png") -137px -114px no-repeat;
                    }
                    .content-item-icon4{
                        background: url("@{images}/icons.png") -247px -114px no-repeat;
                    }
                    .content-item-right{
                        h2{
                            color:#333;
                            font-size: 14px;
                            margin-bottom: 15px;
                        }
                        .nums{
                            color: #333;
                            font-size: 14px;
                        }
                        em{
                            color: #ff503f;
                            font-size: 30px;
                            font-weight: bold;
                            margin-right: 4px;
                            /* font-style: normal; */
                        }
                    }
                }
            }
        }
        .home-block + .home-block{
            margin-top: 42px;
        }
        .data-block{
            h3{
                text-align:center;
                color:#333;
                font-size: 14px;
                margin-bottom: 30px;
                font-weight:bold;
            }
            .expecail{
                margin-bottom: 12px;
            }
            .subject{
                margin-bottom: 20px;
            }
            .content-info{
                /* flex: 1; */
                margin-left: @marginRight;
                width: 310px;
                /* float: left; */
                /* position: absolute;
                left: 0;
                top: 0; */
                display: inline-block;
                .content-item{
                    padding: 15px 0 0;
                    width: auto;
                    height: 140px;
                    min-width: 310px;
                    margin-left:0;
                    a{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                ul{
                    display: flex;
                    li{
                        flex:1;
                        padding: 0 20px;
                        white-space: nowrap;
                        text-align: center;
                    }
                    li + li{
                        &:before{
                            content: '';
                            width: 1px;
                            height: 32px;
                            background: #e5e5e5;
                            position: relative;
                            top: 12px;
                            display: inline-block;
                            margin-right: 18px;
                            float: left;
                        }
                    }
                    .es-li{
                        &:before{
                            top: 28px;
                        }
                    }
                    .half-es-li{
                        padding-top: 14px;
                    }
                    .text{
                        color:#333;
                        font-size: 14px;
                        margin-right: 20px;
                    }
                    .es-text{
                        position: relative;
                        top: -32px;
                    }
                    em{
                        color: #ff503f;
                        font-size: 30px;
                        font-weight: bold;
                        /* font-style: normal; */
                    }
                }
            }
            .content-info + .content-info{
                /* width: calc(100% - (@marginRight * 2 + 310px)); */
                /* margin-left: (@marginRight * 2 + 310px); */
                width: auto;
                overflow: auto;
                .content-item{
                    margin-right: @marginRight;
                    width: 496px!important;
                    float: left;
                }
            }
            .outer{
                display: flex;
                /* overflow: hidden; */
                /* position: relative; */
            }
            .ex-content-info{
                .content-item{
                    width: 496px;
                }
            }
        }
        /* 修改下拉框样式 */
        .am-form-group{
            margin-bottom: 0;
            padding-right: 0;
            float: right;
            padding-left: 0;
            margin-left: 10px;
        }
        .ex-am-form-group{
            width: 18%;
        }
        .home-select-period,.home-select-grade{
            width: 20%;
        }
        /* .el-input__inner{
            border: 1px solid #abe1ec!important;
        }
        .el-input__inner:hover{
            border: 1px solid #abe1ec!important;
        } */
        /* .el-input.is-disabled{
            top:5px;
        } */
        .el-icon-caret-top:before{
            content: '';
            display: inline-block;
            width: 14px;
            height: 8px;
            background: url("@{images}/down1.png") no-repeat;
        }

        .search-btn{
            width: auto;
        }

        /* 进度条 */
        .circle {
            width: 80px;
            height: 80px;
            position: relative;
            border-radius: 50%;
            background: #ff9600;
            display: inline-block;
        }
        .full{
            background: #00a0e9;
        }
        .continued,.step{
            background: #86cc58;
        }

        .clip-left,.clip-right{
            width:80px;
            height:80px;
            position: absolute;
            top: 0px;left: 0px;
        }
        .circle-left, .circle-right{
            width:80px;
            height:80px;
            position: absolute;
            border-radius: 50%;
            top: 0px;left: 0px;
            background: #dcdcdc;
            transition: transform .3s;
            -webkit-transition: transform .3s;
        }
        .circle-right,.clip-right {
            clip:rect(0,auto,auto,40px);
        }
        .circle-left , .clip-left{
            clip:rect(0,40px,auto,0);
        }
        .mask {
            width: 74px;
            height: 74px;
            border-radius: 50%;
            left: 3px;
            top: 3px;
            background: #FFF;
            position: absolute;
            text-align: center;
            line-height: 74px;
            font-size: 14px;
            color: #333;
            span{
                font-size:20px;
                color: #ff503f;
                font-weight:bold;
                margin-right:2px;
                font-style:italic;
            }
        }
        /* .search-btn{
            position: relative;
            top: -1px;
        }
        .home-select-period{
            top: -5px;
        }
        .home-select-grade{
            top: -6px;
        } */
    }
    /* .el-select-dropdown__item.selected,.el-select-dropdown__item.selected.hover, .el-select-dropdown__item:hover{
        background: #50d7c7;
    }
    .el-select-dropdown__list{
        padding: 0px 0;
    }
    .el-select-dropdown__item{
        padding: 0px 10px;
        height: auto;
    } */
</style>
